<template>
  <BlurView class="login" :image="image" :blur="15" color="#fff" :opacity="0">
    <BlurView class="form" color="rgb(36,37,42)" :opacity="0.75" :blur="0">
      <div class="form-edit">
        <form @submit.prevent="handleClickButton">
          <h2 class="title">SIGN IN</h2>
          <Input name="username" label="Username" v-model="username" />
          <Input
            name="password"
            type="password"
            label="Password"
            v-model="password"
          />
          <Button
            class="sign-in"
            color="#00c7cd"
            label="SIGN IN"
            :disabled="
              !username || !password || !!login_loading || login_success
            "
            @click="handleClickButton"
          >
            <Icon
              v-if="login_loading"
              class="login-loading"
              slot="before"
              name="loading"
            ></Icon>
          </Button>
          <p id="error">{{ error }}</p>
          <p id="message">{{ message }}</p>
        </form>
      </div>
    </BlurView>
  </BlurView>
</template>

<script>
// @ is an alias to /src
import BlurView from "@/components/BlurView.vue";
import Input from "@/components/Input.vue";
import Button from "@/components/Button.vue";
import Icon from "@/components/Icon.vue";
import Http from "@/utils/Http";
import Cookie from "js-cookie";
import { mergeRequestUrl } from "../utils/helper";

export default {
  name: "home",
  components: { BlurView, Input, Button, Icon },
  data() {
    return {
      image: require("@/assets/images/bg.jpg"),
      username: "",
      password: "",
      login_loading: false,
      error: "",
      message: "",
      login_success: false,
      target: ""
    };
  },
  created() {
    this.target = this.$route.query.target || "";
    this.appid = this.$route.query.appid || "";
  },
  methods: {
    handleClickButton() {
      const { username, password } = this;
      this.login_loading = true;
      console.log(mergeRequestUrl("/login"));
      Http.post(mergeRequestUrl("/login"), {
        username,
        password,
        appid: this.appid
      })
        .catch(error => {
          this.login_loading = false;
          this.error = error.data.message || "登录失败";
          return Promise.reject(error);
        })
        .then(({ data: { token, duration: expires } }) => {
          this.error = "";
          Cookie.set("token", token, {
            expires: new Date(Date.now() + expires)
          });
          this.login_success = true;
          this.login_loading = false;
          this.$router.replace(
            `/direction?target=${this.target}&appid=${this.appid}`
          );
        });
    }
  }
};
</script>

<style lang="less">
@import "../assets/common.less";
.full {
  width: 100%;
  height: 100%;
}
.login {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  font-size: 1rem;

  @form-width: 325;
  @form-height: 420;
  .form {
    overflow: hidden;
    width: @form-width / @fontsize * 1em;
    height: @form-height / @fontsize * 1em;
    transform: translate(-50%, -50%);
    position: relative;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    font-family: "ProximaNova-Regular";
    font-size: 1rem;

    .form-edit {
      .full;
      display: flex;
      justify-content: center;
      align-items: center;

      #error,
      #message {
        font-size: 0.8em;
      }

      #error {
        color: #ff4141;
      }

      > form {
        width: 205 / @form-width * 100%;
        height: 300 / @form-height * 100%;

        @title-height: 30 / @fontsize * 1em;
        .title {
          color: #ccc;
          margin: 0;
          height: @title-height;
          line-height: @title-height;
          text-transform: uppercase;
        }
      }
    }

    .sign-in {
      margin-top: 40 / @fontsize * 1em;

      &:disabled {
        border-color: #ccc !important;
        color: #ccc !important;
      }

      @keyframes login-loading {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .login-loading {
        width: 1em;
        height: 1em;
        animation: login-loading 2s infinite linear;
      }
    }

    @media screen and (max-width: 360px) {
      font-size: 14px;
    }
  }
}
</style>
